import React, { useEffect, useState } from 'react'
import { Table, Space, Radio, Switch, Popconfirm, message, Button, Modal, Input, Pagination, Select, Form, Option } from 'antd';

import { httpGetInformation ,httpChangeStatus ,httpDelInformation ,httpAddInformation,httpEditInformation} from '../../api/information'
const Order = () => {
  const { Option } = Select;

  // 房源数据
  const [data, setData] = useState([]);
   const [title, setTitle] = useState('')
  const [leader, setLeader] = useState('')
  const [updateTime, setUpdateTime] = useState('')

  const [isText, setIsText] = useState(true); //add/edit
  const [id, setId] = useState(); //编辑id

  const [pageCode, setPageCode] = useState(1);
  const [pageSize, setPageSize] = useState(4);
  const [total, setTotal] = useState(0);//总页数
  //  搜索的内容
  const [one, setOne] = useState('');
  const [two, setTwo] = useState('');

  const [state, setState] = useState('')//状态
  const [value, setValue] = useState('')//搜索

  const [isModalOpen, setIsModalOpen] = useState(false);//弹框

  const columns = [
    {
      title: '序号',
      width: 30,
      dataIndex: 'id',
      key: 'id',
      fixed: 'left',
      render: (_, record, index) => (
        <span>{(pageCode - 1) * pageSize + index + 1}</span>
      ),
    },
    {
      title: '文章标题',
      width: 60,
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '创建时间',
      width: 60,
      dataIndex: 'updateTime',
      key: 'updateTime',
    },
    {
      title: '状态',
      width: 60,
      dataIndex: 'status',
      key: 'status',
       render: (_,{status,id}) => (
        <div>
          
           <Switch 
           checkedChildren="开启" 
           unCheckedChildren="关闭" 
           checked={status === '开启'}
           onChange={()=>onState(status,id)}
           />

        </div>
      )
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 90,
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => showModal(false, record)}>编辑</a>
          <Popconfirm title="确定删除吗?" onConfirm={() => handleDelete(record.id)}>
            <a>删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  useEffect(() => {
    getData()
  }, [pageCode, value, state])

  // 获取经纪人数据
  const getData = async () => {
    const res = await httpGetInformation('/information', { pageCode, pageSize, value, state });
    setData(res.data.list)
    setTotal(res.data.total)
  }
  // 删除
  const handleDelete = async (id) => {
    console.log(11)
    const res = await httpDelInformation("/delInformation", { id })
    if (res.data.code === 200) {
      message.success(res.data.msg);
      getData()
    } else {
      message.warning(res.data.msg);
    }

  }
  // 下拉框
  const handleChange = (value) => {
    setTwo(value)
  }
  // 搜索
  const Search = () => {
    setValue(one)
    setState(two);
  }
  // page页码改变
  const onPageChange = (page) => {
    setPageCode(page)
  };
  // 状态改变
  const onState=async(status,id)=>{
     console.log(status,id);
    const res = await httpChangeStatus('/changeStatus',{status,id});
    getData()
    message.success(res.data.msg);

  }
  // 弹框
  const showModal = (type, obj) => {
    setIsText(type)
    setIsModalOpen(true);
    // 添加
    if (type) {
      setTitle("")
      setLeader('')
      setUpdateTime("")
     
    } else {
      // 编辑
      setTitle(obj.title)
      setLeader(obj.leader)
      setUpdateTime(obj.updateTime)
      setId(obj.id)
    }
  };
  // 确认按钮
  const handleOk = async () => {
    if (isText) {
      // 添加
      const res = await httpAddInformation('/addInformation', { title,leader,updateTime,id })
      if (res.data.code === 200) {
        getData();
        message.success(res.data.msg);
      } else {
        message.warning(res.data.msg);
      }
    } else {
      // 编辑
      const res = await httpEditInformation('/editInformation', { title,leader,updateTime, id })
      if (res.data.code === 200) {
        getData();
        message.success(res.data.msg);
      } else {
        message.warning(res.data.msg);
      }
    }
    setIsModalOpen(false);
  };
  // 弹框关闭
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <div>
      <div style={{ display: 'flex', marginBottom: '20px', marginLeft: '10px' }}>

        <Select
          defaultValue="请选择"
          style={{
            width: 230,
            marginRight: '10px'
          }}
          onChange={handleChange}
        >
          
          <Option value="开启">开启</Option>
          <Option value="关闭">关闭</Option>
        </Select>
        搜索: <Input allowClear onChange={(e) => setOne(e.target.value)} style={{ width: '300px', height: '35px', marginLeft: '10px' }} />
        <Button type="default" onClick={Search}>查询</Button>
        <Button type="primary" onClick={() => showModal(true)} style={{ marginLeft: '10px' }}>新建</Button>
      </div>

      <Table
        columns={columns}
        dataSource={data}
        rowKey="id"
        pagination={false}
      />
      {/* 分页 */}
      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <Pagination current={pageCode} total={total} pageSize={pageSize} onChange={onPageChange} />
      </div>

      {/* 弹框 */}

      <Modal title={isText ? '添加' : '编辑'} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <p>
          文章标题: <Input style={{ width: '250px' }} value={title} onChange={(e) => setTitle(e.target.value)} />
        </p>
        <p>创建人: <Input style={{ width: '250px' }} value={leader} onChange={(e) => setLeader(e.target.value)} /></p>
        <p>创建时间: <Input style={{ width: '250px' }} value={updateTime} onChange={(e) => setUpdateTime(e.target.value)} /></p>
      </Modal>    

    </div>
  )
}
export default Order;
